import { useState } from 'react';
import Header from '../components/Header.jsx';
import Sidebar from '../components/Sidebar.jsx';
import SearchBox from '../components/SearchBox.jsx';
import NewsSection from '../components/NewsSection.jsx';
import { useNavigate } from 'react-router-dom';
const styles = {
    container: {
      display: 'flex',
      flexDirection: 'column',
      height: '100vh'
    },
    content: {
      display: 'flex',
      flex: 1,
      overflow: 'hidden'
    },
    main: {
      flex: 3,
      padding: '20px',
      backgroundColor: '#fff',
      maxWidth: '1200px',
      margin: '0 auto'
    },
    mainStyle : {
      width: '100%',
      maxWidth: '1200px',
      margin: '0 auto',
      padding: '20px',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center'
    },
  };
  console.log('Header:', Header);
  console.log('Sidebar:', Sidebar);
  console.log('SearchBox:', SearchBox);
  console.log('NewsSection:', NewsSection);
  
  // 应该输出函数，如果输出 undefined 或对象则有问题
const Home = () => {
  const [searchHistory, setSearchHistory] = useState([
    'test1',
    'test2',
    'test3',
    'test1',
    'test2',
    'test3',
    'test1',
    'test2',
    'test3',
    'test1',
    'test2',
    'test3',
    'test1',
    'test2',
    'test3'
  ]);

  const [hotSearches] = useState([
    'test1',
    'test2',
    'test3'
  ]);
  const delete_message = (index)=>{
    setSearchHistory(searchHistory.filter((x,i)=>i!==index))
  }
  const all_delete = ()=>{
    setSearchHistory([])
  }
  const navigate = useNavigate()
  const newSearch = ()=>{
    navigate("/home")
  }
  return (
    <div style={styles.container}>
      <div style={styles.content}>
        <Sidebar 
          history={searchHistory} 
          hotSearches={hotSearches} 
          onDeleteHistory={delete_message}
          delete_all = {all_delete}
          onNewSearch={newSearch}
        />
        <div style={styles.mainStyle}>
          <SearchBox />
          <NewsSection />
        </div>
      </div>
    </div>
    );
    };
export default Home;